<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="d">
        <p id="pgv">进度：%</p>
        <progress id="pg" max="100" value=""></progress>
    </div>

    <script>
        function createTimer() {
            var pg = document.getElementById('pg')
            var pgv = document.getElementById('pgv')
            pg.value = 0;
            var timer = setInterval(function () {
                if (pg.value !== 100) {
                    pg.value++
                    pgv.innerHTML = '进度：' + pg.value + '%'
                } else {
                    pgv.innerHTML = '加载完成'
                    clearInterval(timer)
                }
            }, 50)
        }
        createTimer();
    </script>
    <style>
    </style>

</body>

</html>